<template>
  <div class="add-model-wrapper">
    <!-- 新增弹窗 -->
    <el-dialog title="新增地址" :visible.sync="addModelFlag" width="50%" center>
    <loading :value="isShowLoading" :width="240" />

      <div class="form">
        <el-row class="add-row">
          <el-col :span="3">
            <span>文件夹名称:</span>
          </el-col>
          <el-col :span="9">
            <autoCompleteInput :type="'DIRNAME'" :val="f_dirName" />
          </el-col>
          <el-col :span="3">
            <span>文件名称:</span>
          </el-col>
          <el-col :span="9">
            <autoCompleteInput :type="'FILENAME'" :val="f_class" />
          </el-col>
        </el-row>
        <el-row class="add-row">
          <el-col :span="3">
            <span>地址名称:</span>
          </el-col>
          <el-col :span="9">
            <el-input
              v-model="f_urlName"
              placeholder="请输入地址名称"
            ></el-input
          ></el-col>
          <el-col :span="3">
            <span>地址路径:</span>
          </el-col>
          <el-col :span="9">
            <el-input v-model="f_url" placeholder="请输入地址"></el-input
          ></el-col>
        </el-row>
        <el-row class="add-row">
          <el-col :span="3">
            <span>当前状态:</span>
          </el-col>
          <el-col :span="9">
            <el-select v-model="f_dataStatus" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option> </el-select
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span>描述:</span>
          </el-col>
          <el-col :span="21">
            <el-input
              type="textarea"
              v-model="f_desc"
              placeholder="请输入备注·····"
            ></el-input
          ></el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toCloseDia">取 消</el-button>
        <el-button type="primary" @click="commitFn">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import autoCompleteInput from "./autoCompleteInput.vue";
export default {
  name: "addModel", //新增组件
  components: {
    autoCompleteInput,
  },
  data() {
    return {
      f_dirName: "", //文件夹名称1
      f_class: "", //分类2
      f_urlName: "", //名称3
      f_url: "", //地址4
      f_themeList: [], //标签列表
      f_order: "", //排序
      f_collect: "0", //是否收藏
      f_createTime: "", //创建时间5
      f_dataStatus: "0", //当前状态
      f_desc: "", //备注
      id: "",
      options: [
        {
          value: "0",
          label: "黄金糕",
        },
        {
          value: "1",
          label: "双皮奶",
        },
        {
          value: "2",
          label: "蚵仔煎",
        },
      ],
      value: "",
      isShowLoading:false
    };
  },
  props: ["addModelFlag"],
  mounted() {},
  methods: {
    toCloseDia() {
      this.$emit("isShow");
    },
    commitFn() {
      let data = {
        id: this.id ? this.id : "",
        f_dirName: this.f_dirName,
        f_class: this.f_class,
        f_urlName: this.f_urlName,
        f_url: this.f_url,
        f_themeList: this.f_themeList, //标签列表
        f_order: this.f_order, //排序
        f_collect: this.f_collect, //是否收藏
        f_createTime: this.f_createTime, //创建时间5
        f_dataStatus: this.f_dataStatus, //当前状态
      };
      this.isShowLoading = true;
      console.log("提交", data);
      // this.$API
      //   .addNavData(data)
      //   .then((res) => {
      //     console.log(res, "oooooo");
      //     this.id = res.data.id;
      //     this.$emit("isShow", "added");
      //   })
      //   .catch((err) => {
      //     console.log(err, "oooooo");
      //   });
      let self = this
      setTimeout(() => {
        self.isShowLoading = false;
      }, 4000);
    },
  },
};
</script>
<style lang="scss" scoped>
.add-row {
  margin-bottom: 15px;
}
.el-col {
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  height: 100%;
  align-items: center;
  span {
    white-space: nowrap;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
